<template>
	<view class='home'>
		<view class="homeTitle">
			<view class="statusBar" style="margin-bottom: 10px;background:white;"></view>
			<uni-nav-bar :title="title"   :border='false'></uni-nav-bar>
		</view> 
		<div class="bigAdv imgPublic">
			<swiper class="swiper"
				:style='"height:"+swHeight+"px;"'
				:autoplay="true"
				:interval="3000"
				:circular='true'>
				<swiper-item v-for="(item,index) in datas.slide" :key="index">
					<view class="advImg imgPublic">
						<image :src="item.image_path" mode="widthFix" @load='getHeight'></image>
					</view>
				</swiper-item>
			</swiper>
		</div>
		<view class="chou imgPublic" @click='goPage(3)' v-if="datas.is_award==1">
			<image lazy-load="true" src="../static/images/price.png" mode="widthFix"></image>
		</view>
		 
		<view class="container">
			<view class="topMenus dFlex jBetween_aCenter" v-if='datas.is_show != "2"'>
				<view class='menuOne imgPublic' @click='goPage(11)'>
					<image lazy-load="true" :src="datas.images1" mode="widthFix"></image>
				</view>
				<view class='menuOne imgPublic' @click='goPage(13)'>
					<image lazy-load="true" :src="datas.images2" mode="widthFix"></image>
				</view>
			</view>
			<!--跑马灯-->
			<view class="home-notice">
			    <view class="game-notice-icon-box">
			        <image style="width:50%;"  src="https://wx.gdxixiashi.com/public/images/home/notice.png" mode="widthFix">
			    </view>
			    <view class="notice-box">
			        <view class="_notice">
			            <next-notice-bar :y="false" initPosition="left" :delay="2000" :row="1" :speed="40" :list="noticeList">
			            	<template #default="{ row, rowIndex, colIndex }">
			            		<view class="notice-bar-item">										
			            			<text space="nbsp"><!-- {{ colIndex + 1 }}.&nbsp; -->{{ row }}</text>
			            		</view>
			            	</template>
			            </next-notice-bar>
						
			        </view>
			    </view>
			</view>
			<view class="advertise" @click='goPage(10)'>
				<image lazy-load="true" :src='datas.images5' mode='widthFix'></image>
			</view>
			<view class="advertise" @click='goPage(101)'>
				<image lazy-load="true" :src='datas.images6' mode='widthFix'></image>
			</view>
			<view class="kindMenu dFlex jBetween_aCenter fWap" >
				<view @click="lookKind(item)" class="kindOne imgPublic dFlex jCenter_aCenter" v-for="(item,index) in datas.style" :key='index'>
					<image lazy-load="true" :src="item.index_image" mode="widthFix"></image>
				</view>
			</view>
			<!-- 拼团图片 -->
			<view class="advertise" @click='lookPT'>
				<image lazy-load="true" :src='datas.group_image' mode='widthFix'></image>
			</view>
			
			<view class="advertise" v-if='datas.images3' @click='goPage(102)'>
				<image lazy-load="true" :src='datas.images3' mode='widthFix'></image>
			</view>
			<!-- <view class="aboutUs"> 
				<view class="commonTit dFlex jBetween_aCenter">
					<view class="tit">关于我们</view>
					<view class="more">
						<text>详情</text>
						<uni-icons type="right" size="14" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="vid imgPublic">
					<image :src='datas.video_image' mode='widthFix'></image>
					<view class="play dFlex jCenter_aCenter" @click="playVid(datas.video_path)" v-if='!vidPlay'>
						<image src="https://wx.gdxixiashi.com/public/images/home/play.png" mode="widthFix"></image>
					</view>
				</view>
			</view> -->
			<view class="aboutUs" v-if="datas.show_video==1" v-for="(item,index) in datas.video" :key='index' >
				<view class="commonTit dFlex jBetween_aCenter">
					<view class="tit">{{item.title}}</view>
				</view>
				<view class="vidList">
					<view class="vid" @click='playVid(item.video_path)'>
						<image :src='item.video_img' mode='widthFix'></image>
						<view class="play dFlex jCenter_aCenter" v-if='!vidPlay'>
							<image src="https://wx.gdxixiashi.com/public/images/home/play.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="aboutUs">
				<view class="line">
					<uni-icons type="phone-filled" size="18" color="#333333"></uni-icons>
					<text>公司电话 {{datas.tel?datas.tel:'-'}}</text>
				</view>
				<view class="line">
					<uni-icons type="staff" size="18" color="#333333"></uni-icons>
					<text>在线时间 {{datas.work_time?datas.work_time:'-'}}</text>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<button open-type="contact" class="kefu imgPublic">
			<image src="https://wx.gdxixiashi.com/public/images/home/kefu2@2x.png" mode="widthFix"></image>
		</button>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="kefu imgPublic" @click='goPage(12)'>
			<image src="https://wx.gdxixiashi.com/public/images/home/kefu2@2x.png" mode="widthFix"></image>
		</view>
		<!-- #endif -->
		<!-- 弹出框 -->
		<view class="zz dFlex jCenter_aCenter" v-if='toastFlag || vidPlay'>
			<view class="toast" @click="closeToast" v-if='toastFlag'>
				<view class="content" v-html="datas.index_notice"></view>
			</view>
			<view class="cutdown" v-if='toastFlag'>{{cutdown}}</view>
			<view class="vidContent" v-if='vidPlay'>
				<video :src="playing_vid" style="width:100%;"></video>
				<view class="closeIcon imgPublic" @click='vidPlay = false;playing_vid = ""'>
					<image src="../static/images/closeIcon.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 授权窗口 -->
		<view class="zz dFlex jCenter_aCenter" v-if='authorDialog'>
			<view class='author'>
				<view class='authorTit'>温馨提示</view>
				<view class='authorContent'>
					欢迎使用洗匣士!<br>
					请您了解，您需要注册成为洗匣士用户后方可使用本应用的功能，有关注册，您可以通过<text class='xieyiBtn' @click.stop='lookXieyi(1)'>《用户协议》</text>详细了解我们为您提供的服 务。请您在使用我们的服务前仔细 阅读<text class='xieyiBtn' @click.stop='lookXieyi(2)'>《隐私权政策》</text>全文，并充分理解。
				</view>
				<view class='btns'>
					<view class='btn agree' @click.stop='tapAuthor(true)'>同意并继续</view>
					<view class='btn disagree' @click.stop='tapAuthor(false)'>不同意</view>
				</view>
			</view>
		</view>
		<view class='seat'></view>
		<tabbar actIdx='0' ref='tabbar' :identity='identity'></tabbar>
	</view>
</template>

<script>
	import nextNoticeBar from '@/components/next-notice-bar/components/next-notice-bar/next-notice-bar.vue'
	export default {
		components:{
			nextNoticeBar
		},
		data() {
			return {
				device:getApp().globalData.platform,
				swHeight:'',
				identity:'1',
				userId:"",
				
				datas:{
					// images1:'../static/images/part_empty.png',
					// images2:'../static/images/part_empty.png',
					is_show:'2',
					show_video:"2",
					is_award:2,
					style:[
						{index_image:'../static/images/list_empty.png'},
						{index_image:'../static/images/list_empty.png'},
						{index_image:'../static/images/list_empty.png'},
						{index_image:'../static/images/list_empty.png'},
						{index_image:'../static/images/list_empty.png'},
						{index_image:'../static/images/list_empty.png'}
					]
				},
				title:'店中店',
				toastFlag:false,
				vidPlay:false,
				playing_vid:'',
				cutdown:15,
				serviceTel:'',
				noticeList:[],
				scrollIntoView: '',
				list: [],
				content:'',
				// 授权弹窗
				authorDialog:false,
				authorStatus:true,
			};
		},
		
		onLoad(e){
			if(e.scene){
				uni.setStorageSync('spreadId',e.scene);
			}
			if(e.spreadId){
				uni.setStorageSync('spreadId',e.spreadId);
			}
			this.$nextTick(()=>{
				// #ifdef APP-PLUS
				uni.hideTabBar();
				// #endif
				this.$refs.tabbar.init();
			})
			if(uni.getStorageSync('identify') == '2'){
				uni.getLocation({
					type:'wgs84',
					success: (res) => {
						getApp().globalData.lat = res.latitude;
						getApp().globalData.lng = res.longitude;
						this.tool.getData('User/changeInfo',{
							storeId:uni.getStorageSync('storeId'),
							lat:res.latitude,
							lng:res.longitude,
						}).then(res=>{
							if(res){}
							uni.switchTab({
								url:'/pages/staging'
							})
						}).catch(err=>{
							console.log(err);
						})
					},
					fail:(err)=>{
						console.log(err);
					},
					complete:()=>{
						
					}
				})
			}
			// #ifdef APP-PLUS
			var authorStatus = uni.getStorageSync('authorStatus');
			if(!authorStatus){
				this.authorDialog = true;
			}else{
				this.authorDialog = false;
			}
			// #endif
		},
		onShow(){
			this.identity = uni.getStorageSync('identify')
			this.userId = uni.getStorageSync('userId')?uni.getStorageSync('userId'):'';
			if(this.identity == '1'){
				this.initData();
				this.initPlatformInfo();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + this.userId,
				// imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				imageUrl:'',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + this.userId,
				// imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				imageUrl:"",
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		// #ifdef APP-PLUS
		onBackPress(options){
			console.log(options);
		},
		// #endif
		methods:{
			// 同意授权
			tapAuthor(status){
				if(status){
					uni.setStorageSync('authorStatus',true);
				}else{
					if(this.device == 'android'){
						plus.runtime.quit();   
					}else{
						plus.ios.import("UIApplication").sharedApplication().performSelector("exit"); 
					}
				}
				this.authorDialog = false;
			},
			lookXieyi(status){
				uni.navigateTo({
					url:'/person/xieyi?status='+status,
				})
			},
			bottom() {
				setTimeout(() => {
					let len = this.list.length;
					if (len > 0 && this.list[len - 1]) {
						this.scrollIntoView = 'danmu' + this.list[len - 1].id
					}
				}, 5000)
			},
			initPlatformInfo(){
				this.tool.getData('User/about',{}).then(res=>{
					console.log('平台信息',res);
					if(res){
						this.serviceTel = res.tel;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 数据
			initData(){
				this.tool.getData('Index/index',{
					device:getApp().globalData.platform,
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
					// #ifdef MP-WEIXIN
					platform:'mini',
					// #endif
					// #ifdef APP-PLUS
					platform:'APP',
					// #endif
				}).then(res=>{
					console.log(res);
					if(res){
						this.datas = res;
						this.title= res.title;
						this.noticeList = res.noticeList;
						if(res.index_notice && (!uni.getStorageSync('toastCount') || uni.getStorageSync('toastCount') < 1)){
							this.toastFlag = true;
							var timer = setInterval(()=>{
								this.cutdown --;
								if(this.cutdown < 0){
									this.cutdown = 6;
									uni.getStorageSync('toastCount',1)
									this.closeToast();
									clearInterval(timer);
								}
							},1000)
						}else{
							this.toastFlag = false;
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 查看拼团列表
			lookPT(){
				uni.navigateTo({
					url:'/home/pt'
				})
			},
			// 播放视频
			playVid(video){
				this.playing_vid = video;
				this.vidPlay = true;
			},
			// 轮播图高度
			getHeight(e){
				let rate = e.detail.width / e.detail.height;
				this.swHeight = uni.getSystemInfoSync().windowWidth * 0.94 / rate;
			}, 
			// 关闭通知
			closeToast(){
				this.toastFlag = false;
				uni.setStorageSync('toastCount',1);
			},
			// 查看分类
			lookKind(kind){
				uni.setStorageSync('act_styleId',kind.styleId);
				uni.switchTab({
					url:'/pages/kind',
				})
			},  
			// 页面跳转
			goPage(idx){
				if(idx == '3'){//抽奖
					if(uni.getStorageSync('userId')){
						uni.navigateTo({
							url:'/home/award'
						})
					}else{
						this.checklogin()
					}
					
				}else if(idx == '2'){//联系客服
					uni.navigateTo({
						url:'/home/sevice'
					})
				}else if(idx == '4'){//公众号
					uni.navigateTo({
						url:'/home/official'
					})
				}else if(idx == '1'){//赔付标准
					uni.navigateTo({
						url:'/home/claim'
					})
				}else if(idx == '5'){//洗户卡
					if(uni.getStorageSync('userId')){
						uni.navigateTo({
							url:'/home/xihuCard'
						})
					}else{
						this.checklogin()
					}
				}else if(idx == '6'){//洗户券
					uni.navigateTo({
						url:'/home/xihuQuan'
					})
				}else if(idx == '7'){//洗户工序
					uni.navigateTo({
						url:'/home/gongxu'
					})
				}else if(idx == '8'){//立即下单
					uni.switchTab({
						url:'/pages/kind',
						fail: (err) => {
							console.log(err);
						}
					})
				}else if(idx == '9'){//立即注册
					this.checklogin()
				}else if(idx == '10'){
					if(uni.getStorageSync('userId')){
						this.tool.getUserInfo().then(res=>{
							if(res.gradeId==1){
								uni.navigateTo({
									url:'/shop/shopDetail?productId=20'
								})
							}else{
								uni.showToast({
									title:'您已开通VIP',
									icon:"none"
								})
								return;
							}
						}).catch(err=>{
							console.log(err);
						})
						
					}else{
						this.checklogin()
					}
				}else if(idx == '101'){
					if(uni.getStorageSync('userId')){
						this.tool.getUserInfo().then(res=>{
							if(res.vip_store==1){
								uni.navigateTo({
									url:'/shop/shopDetail?productId=54'
								})
							}else if(res.vip_store==2){
								uni.showToast({
									title:'您已开通店中店商家',
									icon:"none"
								})
								return;
							}else if(res.vip_store==3){
								uni.showToast({
									title:'当前等级不能开通店中店商家',
									icon:"none"
								})
								return;
							}
						}).catch(err=>{
							console.log(err);
						})
						
					}else{
						this.checklogin()
					}
				}else if(idx == '102'){
					console.log(1);
					uni.navigateTo({
						url:'/shop/allKind?styleId=152&styleName=店中店'
					})
				}else if(idx == '13'){
					if(uni.getStorageSync('userId')){
						this.tool.getUserInfo().then(res=>{
							if(res.gradeId<3){
								uni.navigateTo({
									url:'/person/vip?id=0'
								})
							}else{
								uni.showToast({
									title:'您已开通云店',
									icon:"none"
								})
								return;
							}
						}).catch(err=>{
							console.log(err);
						})
						
					}else{
						this.checklogin()
					}
				}else if(idx == '11'){
					uni.switchTab({
						url:'/pages/shop'
					})
				}else if(idx == '12'){
					uni.makePhoneCall({
						phoneNumber:this.serviceTel,
						fail:(err)=>{
							console.log(err);
						}
					})
					/* uni.navigateTo({
						url:'/person/online_service'
					}) */
				}
			},
			checklogin(){
				// #ifdef MP-WEIXIN
				uni.redirectTo({
					url:'/person/login'
				})
				// #endif
				// #ifdef APP-PLUS
				uni.redirectTo({
					url:'/person/mobileLogin'
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	
	.chou {
		width: 70px;
		position: fixed;
		right: 5%;
		bottom: 50%;
		z-index: 9999;
	}
	.author{
		.btns{
			.btn{
				width: 100%;
				text-align: center;
				margin-bottom: 12px;
			}
			.agree{
				color: white;
				background: linear-gradient(#609ff8 0%, #1664ff 100%);
				border-radius: 5px;
				padding: 10px 0;
				font-size: 13px;
			}
			.disagree{
				font-size: 12px;
				color: #909399;
			}
			width: 100%;
			margin-top: 12px;
		}
		.authorContent{
			.xieyiBtn{
				color: #609ff8;
				font-weight: bold;
			}
			width: 100%;
			line-height: 20px;
		}
		.authorTit{
			width: 100%;
			text-align: center;
			padding: 12px 0;
		}
		width: 65%;
		padding: 0 20px 0;
		box-sizing: border-box;
		background: white;
		border-radius: 5px;
	}
	page{
		// background: white;
	}
	.home{
		width: 100%;
		.homeTitle{
			width: 100%;
			background:white;
		}
		.kefu{
			width: 60px;
			height: 60px;
			position: fixed;
			right: 10px;
			bottom: 90px;
		}
		.vidContent{
			width:85%;
			.closeIcon{
				width:20px;
				height:20px;
				margin:12px auto 0;
			}
		}
		.cutdown{
			width:25px;
			height:25px;
			background: rgba(255, 255, 255, 0.3);
			color:white;
			border-radius: 50%;
			position: absolute;
			top: 12vh;
			left: 8vw;
			text-align: center;
			line-height: 25px;
		}
		.toast{
			width: 85%;
			border-radius: 6px;
			background: white;
			padding: 12px;
			box-sizing: border-box;
			.closeBtn{
				width: 100%;
				text-align: center;
				color: white;
				padding: 10px 0;
				margin-top: 10px;
				background: #2D67D2;
				border-radius: 6px;
			}
			.content{
				max-height: 60vh;
				overflow: auto;
			}
		}
		.container{
			width: 94%;
			// margin: 0 auto -60px;
			margin: 0 auto;
			border-radius: 12px 12px 0 0;
			position: relative;
			overflow: hidden;
			.aboutUs{
				width: 100%;
				padding: 10px 10px 0;
				box-sizing:border-box;
				background: #F8F8F8;
				border-radius: 10px;
				.line{
					width: 100%;
					color:#333333;
					font-size: 14px;
					padding:5px 0;
					>text{
						display: inline-block;
						margin-left: 10px;
					}
				}
				.vid{
					width: 100%;
					position:relative;
					margin-bottom: 5px;
					.play{
						width:100%;
						height: 100%;
						position:absolute;
						top:0;
						left:0;
						image{
							width:40px;
							height:40px;
						}
					}
					video{
						width: 100%;
						position: relative;
					}
				}
			}
			.advertise{
				margin-bottom:10px;
			}
			.kindMenu{
				width: 100%;
				margin-top: 10px;
				.kindOne{
					// width: 31.5%;
					width:29vw;
					height:29vw;
					overflow: hidden;
					margin-bottom: 10px;
					image{
						border-radius: 5px;
					}
				}
			}
			.topMenus{
				width: 100%;
				margin: 8px auto 10px;
				.menuOne{
					width: 48%; 
				}
			}
		}
		.bigAdv{
			width: 94%; 
			margin:0 auto;
			position:relative;
		}
	}
	.mt-1 {
			margin-top: 10rpx;
		}
	
		.rounded {
			border-radius: 8rpx;
		}
	
		.pl-3 {
			padding-left: 30rpx;
		}
	
		.p-2 {
			padding: 20rpx;
		}
	
		.text-white {
			color: #ffffff;
		}
	
		.text-danger {
			color: #dc3545;
		}
	
		.font-md {
			font-size: 12px ;
		}
	
		.flex {
			/* #ifndef APP-PLUS-NVUE */
			display: flex !important;
			/* #endif */
			flex-direction: row;
		}
	
		.justify-start {
			justify-content: flex-start;
		}
	
		.align-start {
			align-items: flex-start;
		}
	    /* 主通知容器样式 */
	.home-notice {
	    margin: 30rpx 0rpx 30rpx 0rpx;
	    height: 60rpx;
	    background-color: #fff;
	    border-radius: 10rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    position: relative;
	    box-shadow: 0 0 18rpx #ccc;
	    overflow: hidden;
		padding:2px 0;
	
	    /* 通知图标容器样式 */
	    .game-notice-icon-box {
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        height: 100%;
	        width: 90rpx;
	        background: #fff;
	    }
	
	}
	/* 通知内容容器样式 */
	.notice-box {
	    position: relative;
	    width: calc(100% - 70rpx);
	
	    /* 实际通知内容样式 */
	    ._notice {
	        position: absolute;
	        left: 0;
	        top: -20rpx;
	        min-width: calc(750rpx * 2);
	        box-sizing: border-box;
	
	        /* 每一条通知的样式 */
	        .swiper-item2 {
	            position: absolute;
	            left: 0;
	            top: 0;
	            min-width: 750rpx;
	        }
	    }
	    /* 通知内容文本样式 */
	    .swiper-content {
	        display: inline-block;
	    }
	}
</style>
